<template>
<view class="reg-wrap">
	<view class="reg-item">
		<view class="reg-item-label">选择身份</view>
		<view class="reg-item-form">
			<radio-group @change="changeType" class="radio-group">
				<label><radio value="1" color="#5ED1FF" :checked="type == 1" />老师</label>
        <label><radio value="2" color="#5ED1FF" :checked="type == 2" />家长</label>
			</radio-group>
		</view>
	</view>
	<view class="reg-item" v-if="type == 1">
		<view class="reg-item-label">老师姓名</view>
		<view class="reg-item-form">
			<input type="text" value="" placeholder="请填写您的真实姓名" class="reg-box" v-model="teacherName" />
		</view>
	</view>
	<view class="reg-item" v-if="type == 1">
		<view class="reg-item-label">所在班级</view>
		<view class="reg-item-form">
			<radio-group @change="changeTeacherClass" class="radio-group">
				<label><radio value="1" color="#5ED1FF" :checked="teacherClass == 1" />小班</label>
        <label><radio value="2" color="#5ED1FF" :checked="teacherClass == 2" />中班</label>
        <label><radio value="3" color="#5ED1FF" :checked="teacherClass == 3" />大班</label>
			</radio-group>
		</view>
	</view>
	<view class="reg-item" v-if="type == 2">
		<view class="reg-item-label">您的孩子姓名</view>
		<view class="reg-item-form">
			<input type="text" value="" placeholder="请填写您的真实姓名" class="reg-box" v-model="childName" />
		</view>
	</view>
	<view class="reg-item" v-if="type == 2">
		<view class="reg-item-label">孩子所在班级</view>
		<view class="reg-item-form">
			<radio-group @change="changeChildClass" class="radio-group">
				<label><radio value="1" color="#5ED1FF" :checked="childClass == 1" />小班</label>
        <label><radio value="2" color="#5ED1FF" :checked="childClass == 2" />中班</label>
        <label><radio value="3" color="#5ED1FF" :checked="childClass == 3" />大班</label>
			</radio-group>
		</view>
	</view>
	<view class="reg-item" v-if="type == 2">
		<view class="reg-item-label">您与孩子的关系</view>
		<view class="reg-item-form">
			<input type="text" value="" placeholder="您与孩子的关系，如：爸爸" class="reg-box" v-model="childRelation" />
		</view>
	</view>
	<view class="reg-item">
		<view class="reg-item-label">手机号码</view>
		<view class="reg-item-form">
			<input type="text" value="" placeholder="手机号码" class="reg-box" v-model="mobile" />
		</view>
	</view>
	<view class="reg-item">
		<view class="reg-item-label">手机验证码</view>
		<view class="reg-item-form">
			<view class="code-form">
				<input type="text" value="" placeholder="手机验证码" class="reg-box" v-model="code" />
				<button class="get-code">获取验证码</button>
			</view>
		</view>
	</view>
	<button class="commit-btn" @tap="nextStep">下一步</button>
</view>
</template>

<script>
export default {
	data() {
		return {
			type: 1,
			teacherName: '',
			teacherClass: 1,
			
			childName: '',
			childClass: 1,
			childRelation: '',
			
			mobile: '',
			code: ''
		}
	},
	methods: {
		changeType(input) {
			this.type = input.target.value
		},
		changeTeacherClass(input){
			this.teacherClass = input.target.value
		},
		changeChildClass(input){
			this.childClass = input.target.value
		},
		nextStep(){
uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes);
		uni.getUserInfo({
			provider: 'weixin',
			success: function(aa) {
				console.log(aa)
			}
		})
  }
});
			if (this.type == 1) { // 身份为 老师
				if(!this.teacherName){
					uni.showToast({
						title: '请填写您的真实姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
			}
			if (this.type == 2) { // 身份为 家长
				if(!this.childName){
					uni.showToast({
						title: '请填写您的真实姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(!this.childRelation){
					uni.showToast({
						title: '您与孩子的关系，如：爸爸',
						icon: 'none',
						duration: 2000
					})
					return
				}
			}
			if (!this.mobile) {
				uni.showToast({
					title: '请填写您的常用手机号码',
					icon: 'none',
					duration: 2000
				})
				return
			}
			if (!this.code) {
				uni.showToast({
					title: '请填写手机验证码',
					icon: 'none',
					duration: 2000
				})
				return
			}
			let formValue = {}
			// 成功
			if (this.type == 1) { // 身份为 老师
				formValue = {
					type: '老师',
					name: this.teacherName,
					classname: this.teacherClass,
					mobile: this.mobile,
					code: this.code
				}
			}
			
			if (this.type == 2) { // 身份为 家长
				formValue = {
					type: '家长',
					name: this.childName,
					classname: this.childClass,
					relation: this.childRelation,
					mobile: this.mobile,
					code: this.code
				}
			}
			this.$api.post('bobo/register', formValue, res => {
				console.log(res)
			})
		}
	},
}
</script>

<style lang="scss">
@import '@/static/css/base.scss';
page{font-size: 28upx; background-color: #F8FCFE}
.reg-wrap{padding: 40upx;}
.reg-item{
	display: flex; align-items: center; margin-bottom: 100upx;
	.reg-item-label{width: 200upx; text-align: right; margin-right: 20upx;}
	.reg-item-form{
		width: 460upx;
		.radio-group{
			display: flex; justify-content: space-around;
		}
		.reg-box{border:1px solid #E5E5E5; background-color: #FFF; height: 85upx;padding: 0 20upx; border-radius: 8upx;}
		.code-form{
			display: flex; align-items: center;
			.get-code{width: 230upx; height: 85upx; background-color: $baseColor; color: #FFF; font-size: 28upx; line-height: 85upx; margin-left: 7upx;}
		}
	}
}
.commit-btn{background-color: $baseColor; color: #FFF;width: 670upx; height: 102upx; font-size: 32upx; line-height: 102upx;}
</style>
